<!DOCTYPE html>
<html>
  <head>
    <title>showCargo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
      .container {
        max-width: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-5 col-sm-offset-1">
          <h1>Show Cargo</h1>
          <br>
          <form role="form" method="POST" action="/show">
            <div class="form-group">
              <input type="text" name="cargo_id" class="form-control" id="url-box" placeholder="Enter Cargo ID..." style="max-width: 300px;">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <br>
          {% for error in errors %}
            <h4>{{ error }}</h4>
          {% endfor %}
          <br>
        </div>
        <div class="col-sm-5 col-sm-offset-1">
          {% if cargo_info %}
            <h2>Cargo Info</h2>
            <br>
            <div id="cargo_info">
              <table class="table table-striped" style="max-width: 300px;">
                <thead>
                  <tr>
                    <th>Owner</th>
                    <th>URI</th>
                  </tr>
                </thead>
                  <tr>
                    <td>{{ cargo_info[0] }}</td>
                    <td>{{ cargo_info[1] }}</td>
                  </tr>
              </table>
            </div>
          {% endif %}
        </div>
        <div class="col-sm-5 col-sm-offset-1">
          {% if export_info %}
            <h2>Export Info</h2>
            <br>
            <div id="export_info">
              <table class="table table-striped" style="max-width: 300px;">
                <thead>
                  <tr>
                    <th>toChainPath</th>
                    <th>receiver</th>
                  </tr>
                </thead>
                  <tr>
                    <td>{{ export_info[0] }}</td>
                    <td>{{ export_info[1] }}</td>
                  </tr>
              </table>
            </div>
          {% endif %}
        </div>
      </div>
      <br><br>
      <a href="/bar">Back to Bar</a>
      <br><br>
    </div>
    <br><br>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </body>
</html>
